<!-- 报文查询 -->

<template>
    <div class="wrapper">
        <template v-if="!isDetail">
            <!-- 报表Tabs组件-->
            <ReportTabs :curTab="curTab" :tabDatas="tabDatas" :isExport="isExport" @updateTab="updateTab" @handleExport="handleExport" />
            <!-- 动态组件-->
            <keep-alive>
                <MessageStaticTable v-if="curTab === '1'" @updateEventData="updateEventData" ref="staticTable"/>
            </keep-alive>
            <MessageExportTable v-if="curTab === '2'" :queryData="queryData" @updateEventData="updateEventData" />
        </template>
        <template v-if="isDetail">
            <MessageDetail />
        </template>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import ReportTabs from '@/components/reportTabs/index.vue';
import MessageStaticTable from './c/MessageStaticTable.vue';
import MessageExportTable from './c/MessageExportTable.vue';
import MessageDetail from './c/MessageDetail.vue';

const curTab = ref('1');
const isExport = ref(true);
const staticTable = ref(null);
const queryData = ref({});

const isDetail = ref(false);

// tabs 数据
const tabDatas = ref([
    {
        id: '1',
        label: '报文查询'
    },
    {
        id: '2',
        label: '离线导出'
    }
]);

const updateTab = (id) => {
    curTab.value = id;
    
    isExport.value = id === '1'? true : false;
};

// 导出
const handleExport = () => {
    const callback = (data) => {
        curTab.value = '2';
        queryData.value = data;
    };
    
    staticTable.value.handleExport(callback);
};
</script>

<style lang="scss" scoped></style>